<template>
	<view>
		<!-- 分享模块 -->
		<uni-popup class="an-share-box" :show="show" type="center" :custom="true" :mask-click="false" @change="change" @longpress="savePicture" >
			<view class="uni-tip">
				<view class="uni-tip-content">
					<view v-if="canvasLoading" class="anLoading">
						<!-- <uni-icons type="spinner-cycle" class="an-ico" size="30"></uni-icons> -->
						<image style="width: 32px; height: 32px;" mode="widthFix" :src="laodingSrc"></image>
					</view>
					<view class="canvasBox">
					 <canvas canvas-id="shareCanvas" style="width:300px;height:190px" ></canvas>
					</view>
				</view>
				<view class="an-ico-line"></view>
				<view class="uni-image-close" @click="cancel()">
					<uni-icons type="closeempty" size="30"></uni-icons>
				</view>
				<view class="an-popup-text" v-if="!canvasLoading">长按图片保存</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import uniIcons from '@/components/uni-icons/uni-icons.vue'
	import {mapState,mapActions} from 'vuex'
	const util = require('@/common/util.js');
	export default {
		props:{
			targetItem:{} // 查询的打卡参数
		},
		components: {
			uniPopup,
			uniIcons
		},
		data() {
			return {
				laodingSrc:'../static/img/loading.gif',
				show: false,
				imgPath:'', // 生成的分享图片 临时路径
				canvasLoading: false
			};
		},
		methods:{
			...mapActions(['getAddressMapBg','getUserInfo']),
			shareOpen(){	// 打卡弹框
				this.show = true
				this.picture()
			},
			change(e) {
				//console.log(e.show)
			},
			cancel() { // 关闭弹框
				this.show = false
			},
			savePicture(){	// 保存图片到系统相册
				let _this = this
				uni.saveImageToPhotosAlbum({
					filePath: _this.imgPath,
					success: function () {
						uni.showToast({
							title: "保存成功",
						})
						_this.cancel()
					},
					fail: function(e){
						console.log("保存失败",e)
					}
				});
			},
			getWeChat(){	// 获取小程序码
				return new Promise((resolve, reject) => { 
					let nd = {
						scene: this.targetItem.id,
						page: 'pages/shareLocation/shareLocation',
						width: 280
					}
					this.$api.getCode(nd).then(res=>{
						util.base64src(res,this.targetItem.id, file=>{
							resolve(file)
						})
					}).catch(error => {	// 接口报错拦截
					   resolve()
					})
				})
			},
			picture: async function () { //生成图片 绘制画布
				
				this.canvasLoading = true
				let signTime = util.timeFormat(this.targetItem.time,"yyyy-MM-dd HH:mm")
			   let avatarUrl // 用户头像
			   let userInfo
			   let address = this.targetItem.address
			   
			   //const ctx = uni.createCanvasContext('shareCanvas')
			   const ctx = uni.createCanvasContext('shareCanvas',this); // 在自定义组件中 需要加 this
			   ctx.setFillStyle('#FFFFFF')
			   ctx.fillRect(150, 11, 140, 170) // 填充背景色
			   await this.getWeChat().then(res=>{ // 获取小程序码图片
					if(res){
						ctx.drawImage(res, 230, 120, 50, 50);  //添加二维码图片
					}
			   })
			   
			   await this.getUserInfo().then(res=>{ // 获取用户头像路径
				    avatarUrl =  res.avatarUrl
					userInfo = res
			   })
			   await util.getImg(avatarUrl).then(val=>{ // 下载用户头像
			   		ctx.drawImage(val, 165, 20, 50, 50)	// 绘制用户头像
			   })
			   
			    //ctx.setTextAlign('center')  // 文字居中
			   ctx.setFillStyle('#000000')
			   ctx.setFontSize(10)     
			   ctx.fillText(userInfo.nickName, 165, 85, 115) 
			   ctx.stroke();
			   
			   ctx.setFillStyle('#333333') // 文字颜色：黑色
			   ctx.setFontSize(9)     // 文字字号：22px
			   ctx.fillText(address, 165, 115, 115) //开始绘制文本的 x/y 坐标位置（相对于画布） 最后一个参数最大宽度
			   ctx.stroke();//stroke() 方法会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。默认颜色是黑色
			   
			   ctx.setFillStyle('#333333')
			   ctx.setFontSize(9)     
			   ctx.fillText(signTime, 165, 100) 
			   ctx.stroke();
			   
			   ctx.setFillStyle('#333333')
			   ctx.setFontSize(9)     
			   ctx.fillText('扫码查看定位', 165, 150) 
			   ctx.stroke();
			   
			   ctx.setFillStyle('#333333')
			   ctx.setFontSize(7)     
			   ctx.fillText('经度：'+this.targetItem.longitude, 165, 160, 66) 
			   ctx.stroke();
			   
			   ctx.setFillStyle('#333333')
			   ctx.setFontSize(7)     
			   ctx.fillText('维度：'+this.targetItem.latitude, 165, 170, 66) 
			   ctx.stroke();
			   
			   await this.getAddressMapBg().then(res=>{	// 获取分享的 背景图
			   		ctx.drawImage(res, 0, 0, 300, 190);  //绘制 背景图
			   })
			   
			   this.canvasLoading = false
			   ctx.draw(false, this.drawPicture());//draw()的回调函数 
			   
			},
			drawPicture() { //生成图片 输出
			    setTimeout(()=>{
				uni.canvasToTempFilePath({ //把当前画布指定区域的内容导出生成指定大小的图片，并返回文件路径
				 x: 0,
				 y: 0,
				 width: 300,
				 height: 190,
				 destWidth: 900, //输出的图片的宽度（写成width的两倍，生成的图片则更清晰）
				 destHeight: 570,
				 canvasId: 'shareCanvas',
				 success: (res)=> {
				  this.imgPath = res.tempFilePath
				 },
				 fail:function(e){
				 	console.log('生成失败：',e)
				 }
				},this)
			   },300)
			},
		}
	}
</script>

<style scoped>
	.uni-tip-content{
		position: relative;
	}
.anLoading{
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -16px;
	margin-left: -16px;
}
</style>
